<template>
    <div class="manager-display">
        <span v-if="managerName">{{ managerName }}</span>
        <span v-else class="no-manager">未指定管理者</span>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { getUserInfo } from '@/api/user' // 假设有这个API，如果没有可以调整为使用静态数据

// 定义组件Props
const props = defineProps({
    managerId: {
        type: [Number, String],
        default: null
    },
    // 是否使用静态数据映射而不是API请求
    useStaticMapping: {
        type: Boolean,
        default: true
    }
})

// 管理者名称
const managerName = ref<string>('')

// 静态管理者ID到名称的映射
const managerMapping: Record<number, string> = {
    2: 'admin (超级管理员)',
    3: 'Sun Lu (孙璐)',
    4: 'Du Anqi (杜安琪)',
    5: 'Zhang Xiuying (张秀英)',
    6: 'Cai Shihan (蔡诗涵)'
}

// 根据ID获取管理者名称
const fetchManagerName = async () => {
    if (!props.managerId) {
        managerName.value = ''
        return
    }

    const id = Number(props.managerId)

    if (props.useStaticMapping) {
        // 使用静态映射获取管理者名称
        managerName.value = managerMapping[id] || `管理者 (ID: ${id})`
    } else {
        // 使用API获取管理者信息
        try {
            const response = await getUserInfo(id)
            const userData = (response as any)?.Data
            if (userData) {
                managerName.value = userData.RealName || userData.UserName || `管理者 (ID: ${id})`
            } else {
                managerName.value = `管理者 (ID: ${id})`
            }
        } catch (error) {
            console.error('获取管理者信息失败:', error)
            managerName.value = `管理者 (ID: ${id})`
        }
    }
}

// 监听managerId变化
watch(() => props.managerId, () => {
    fetchManagerName()
}, { immediate: true })

// 组件挂载时获取数据
onMounted(() => {
    fetchManagerName()
})
</script>

<style scoped>
.manager-display {
    display: inline-block;
}

.no-manager {
    color: #909399;
    font-style: italic;
}
</style>